<template>
	<view class="pageview">
		<cl-navbar autoBack placeholder :title="$t('addressbook.friend_group_manage.title')"></cl-navbar>
		<view class="pageContent">
			<view class="cellviewGrop" @click="addGroup">
				<view class="cellview">
					<view class="cellview__left">
						<image src="../../static/icon/add.svg" mode="" style="width: 64rpx;height: 64rpx;margin-right: 20rpx;"></image>
						<text class="cellview__left__title">{{$t("addressbook.friend_group_manage.add")}}</text>
					</view>
				</view>
			</view>
			<view class="cellviewGrop" @click="editGroup(item)" v-for="(item,index) in grouplist" :key="item.group_id">
				<view class="cellview">
					<view class="cellview__left">
						<text class="cellview__left__title">{{item.group_name}}</text>
					</view>
					<view class="cellview__right" @click.stop="delGroup(item)" v-if="item.group_id && type == 'manage'">
						<u-icon name="minus-circle-fill" color="#ff4242" size="20"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view>
			<cl-model ref="clDel"></cl-model>
			<cl-model ref="clAdd">
				<u-input
					:customStyle="{backgroundColor:'#ededed',height:'80rpx',padding:'0 20rpx',borderRadius: '10rpx'}"
					fontSize="28rpx"
					focus
				    border="none"
					:adjustPosition="false"
					clearable
					v-model="addGroupInput"
				  ></u-input>
			</cl-model>
			<cl-model ref="clEdit">
				<u-input
					:customStyle="{backgroundColor:'#ededed',height:'80rpx',padding:'0 20rpx',borderRadius: '10rpx'}"
					fontSize="28rpx"
					focus
				    border="none"
					:adjustPosition="false"
					v-model="editGroupInput"
					clearable
				  ></u-input>
			</cl-model>
		</view>
	</view>
</template>

<script>
	import friendGroupApi from "@/services/api/friendsGroup.js"
	export default {
		name: 'friend_group_manage',
		data() {
			return {
				grouplist: [],
				addGroupInput:'',
				editGroupInput:'',
				type:'manage',
				friend_id:0,
			}
		},
		onLoad() {
			let {type,friend_id} = this.$Route.query
			if(type){
				// editFriend
				this.type = type
			}
			if(friend_id){
				this.friend_id = friend_id
			}
			this.getlist()
		},
		methods: {
			async getlist(){
				try{
					let resapi = await friendGroupApi.list()
					if(resapi){
						this.grouplist = resapi.list
					}
				}catch(e){
					//TODO handle the exception
				}
			},
			addGroup(){
				this.$refs.clAdd.show({
					title:this.$t("addressbook.friend_group_manage.add"),
					confirm:async(e)=> {
						try{
							let resapi = await friendGroupApi.add(this.addGroupInput)
							if(resapi){
								e.showModel = false
								this.addGroupInput = ''
								this.grouplist.push(resapi)
								//通知页面
								uni.$emit('onFriendGroupManage', {
									type:'add',
									data:resapi
								})
							}
						}catch(e){
							//TODO handle the exception
						}
					}
				})
			},
			async editGroup(item){
				if(this.type == 'manage'){
					if(item.group_id){
						this.editGroupInput = item.group_name
						this.$refs.clEdit.show({
							title:this.$t("addressbook.friend_group_manage.edit"),
							confirm:async(e)=> {
								try{
									let resapi = await friendGroupApi.edit(item.group_id,this.editGroupInput)
									if(resapi){
										let index = this.grouplist.findIndex(it=>it.group_id == item.group_id)
										if(index != -1){
											this.$set(this.grouplist[index],'group_name',this.editGroupInput)
										}
										this.editGroupInput = ''
										e.showModel = false
										//通知页面
										uni.$emit('onFriendGroupManage', {
											type:'edit',
											data:{
												group_id:item.group_id,
												group_name:this.grouplist[index].group_name
											}
										})
									}
								}catch(e){
									//TODO handle the exception
								}
							}
						})
					}
				}else if(this.type == 'editFriend'){
					try{
						let resapi = await friendGroupApi.operateFriend(item.group_id,item.group_name,this.friend_id)
						if(resapi){
							setTimeout(()=>{
								this.$Router.back(1)
							},1000)
						}
					}catch(e){
						//TODO handle the exception
					}
					
				}
			},
			delGroup(item){
				this.$refs.clDel.show({
					title:`${this.$t("addressbook.friend_group_manage.del")} ${item.group_name}`,
					content:this.$t("addressbook.friend_group_manage.delInfo"),
					confirm:async(e)=> {
						try{
							let resapi = await friendGroupApi.delGroup(item.group_id)
							if(resapi){
								let index = this.grouplist.findIndex(it=>it.group_id == item.group_id)
								if(index != -1){
									this.grouplist.splice(index,1)
								}
								e.showModel = false
								//通知页面
								uni.$emit('onFriendGroupManage', {
									type:'del',
									data:{
										group_id:item.group_id
									}
								})
								// 更改储存的好友列表，把里面的好友列表都改成0
								this.$store.dispatch('updateFriendListGroup',item.group_id)
							}
						}catch(e){}
					}
				})
			}
		},
	};
</script>

<style scoped lang="scss">
	.cellviewGrop {
		background: #ffffff;
		border-radius: 20rpx;
		margin: 20rpx 30rpx 0;
		padding: 30rpx;
		min-height: 110rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: center;
	
		.cellview {
			display: flex;
			justify-content: space-between;
	
			&__left {
				display: flex;
				align-items: center;
	
				&__title {
					font-size: 28rpx;
				}
			}
	
			&__right {
				display: flex;
				align-items: center;
	
				&__content {
					font-size: 28rpx;
					color: #61626e;
				}
			}
		}
	}
	
</style>